<template>
	<view>
		<!-- <mc-framework navTitle="MES工控机" @changeLevel="changeLevel" @changeEquipment='changeEquipment'> -->
		<mc-framework navTitle="MES工控机" @changeLevel="changeLevel">
			<template #workbench>
				<view class="TabsBox">

					<view class="TabsBox_view">
						<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
							<u-tag :text="item.name" :plain="!item.checked" :name="index"
								@click="radioClick(item,index)">
							</u-tag>
						</view>
					</view>
				</view>


			</template>

			<!-- 主内容 -->
			<template #content>
				<view class="content_box f-dc">
					<view class="table table_top_th">
						<table>
							<tr>
								<th width='10%'>单据编号</th>
								<th width='10%'>制单日期</th>
								<th width='20%'>产品名称</th>
								<th width='10%'>计划数量</th>
								<th width='10%'>可报工数量</th>
								<th width='10%'>完成数量</th>
								<th width='10%'>合格数量</th>
								<th width='10%'>不良数量</th>
								<th width='10%'>生产状态</th>
							</tr>
						</table>
					</view>
					<z-paging ref="paging" v-model="contents" @query="queryList" :fixed="false" class="z_paging">
						<view class="table" style="overflow-x: auto;width: 100%;">
							<table>
								<tbody>
									<tr v-for="(item,index) in contents" @click="planIDClick(item)">
										<td width='10%'>
											<div class="newlineDiv"><text>{{item.PGBillNo}}</text></div>
										</td>
										<td width='10%'>
											<div class="newlineDiv"><text>{{item.BillDate}}</text></div>
										</td>
										<td width='20%'>
											<div class="newlineDiv"><text>{{item.ProductName}}</text></div>
										</td>
										<td width='10%'>
											<div class="ListTdDiv"><text>{{item.FPlanQty}}</text></div>
										</td>
										<td width='10%'>
											<div class="ListTdDiv"><text>{{item.ReportQty}}</text></div>
										</td>
										<td width='10%'>
											<div class="ListTdDiv"><text>{{item.WCQty}}</text></div>
										</td>
										<td width='10%'>
											<div class="ListTdDiv"><text>{{item.FDailyQtt}}</text></div>
										</td>
										<td width='10%'>
											<div class="ListTdDiv"><text>{{item.FNGQty}}</text></div>
										</td>
										<td width='10%'>
											<div class="ListTdDiv"><text>{{item.FStateName}}</text></div>
										</td>
									</tr>
								</tbody>
							</table>

						</view>

					</z-paging>

				</view>

				<view class="add">
					<u-icon name="scan" color="#fff" size="30" @click="scan"></u-icon>
				</view>
				<view class="search">
					<u-icon name="search" color="#fff" size="30" @click="search"></u-icon>
				</view>

				<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="10px 10px 0 0"
					@change="changePopup">
					<view class="popup_content">

						<u-cell-group :border='false'>
							<u-cell title="机台" :isLink="false" :value='FormData.EquipmentName'
								@click="openBaseScreen('机台')"></u-cell>
							<u-cell title="开始时间" :isLink="false" :value='FormData.FBDate'
								@click="addTime('开始')"></u-cell>
							<u-cell title="结束时间" :isLink="false" :value='FormData.FEDate'
								@click="addTime('结束')"></u-cell>
						</u-cell-group>
						<view class="bottomBtns">
							<button block @click="submit">
								查 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 询
							</button>
						</view>

					</view>
				</uni-popup>
				<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel='show = false'
					@confirm='pickerConfirm'></u-datetime-picker>
				<u-toast ref="uToast"></u-toast>


				<u-popup :show="popup_logout" mode="center" :closeOnClickOverlay="false" :round="4">
					<view class="popup-content">
						<view class="popup-content_close x-c">
							<uni-icons type="closeempty" color="#999" size="20"
								@click='popup_logout = false'></uni-icons>
						</view>
						<view class="x-c title">
							<text>{{popuptitle}}</text>
						</view>
						<view class="contentView">
							<text>{{popupcontent}}</text>
						</view>
						<view class="btnBox x-ac">
							<u-button type="primary" text="确定" @click="confirmClick"></u-button>
						</view>
					</view>
				</u-popup>
			</template>

		</mc-framework>
	</view>
</template>

<script>
	import {
		getTimeStamp,
		getFormatDateTime,
		getBefore7DateTime,

	} from '@/mes/common/base.js';

	export default {
		data() {
			return {
				popuptitle: '',
				popupcontent: '',
				popup_logout: false,
				radios: [{
						name: '全部',
						id: '',
						checked: true
					}, {
						name: '未报工',
						id: '0',
						checked: false
					},
					{
						name: '部分报工',
						id: '2',
						checked: false
					},
					{
						name: '已完成',
						id: '1',
						checked: false
					},

					{
						name: '指定完成',
						id: '-1',
						checked: false
					},


				],
				FormData: {
					PageIndex: 1,
					PageSize: 30,
					FState: '',
					FBDate: '',
					FEDate: '',
					EquipmentName: '',
					EquipmentCode: '',
					EquipmentID: 0

				},
				contents: [],
				show: false,
				value1: Number(new Date()),
				TimeName: '',
				disabled: false


			};
		},
		onLoad() {
			var that = this
			that.FormData.FBDate = getBefore7DateTime()

			that.FormData.FEDate = getFormatDateTime(new Date())

			this.changeEquipmentName()
			this.$store.state.GuyueModule.MesBasicInfo.Status.ClockStatusTitle = '其他'
		},
		onBackPress(options) { // 监听页面返回
			if (options.from == 'navigateBack') { // 通过点击路由返回
				return false;
			} else if (options.from == 'backbutton') { // 通过外置返回
				return true;
			}
		},
		onShow() {
			this.getValue
			this.getList
		},
		methods: {
			confirmClick() {
				let that = this;
				that.popup_logout = false


			},

			getList() {
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			getValue(e) {
				console.log(e);
				if (e != '返回') {
					this.FormData.EquipmentID = e.EquipmentID
					this.FormData.EquipmentName = e.name
					this.$forceUpdate()
				}

			},

			openBaseScreen(str) {
				var that = this;
				var obj;
				if (str == '机台') {
					obj = {

						type: str,
						cmd: 'getEquipment',
						param: {}
					}
				}
				uni.navigateTo({
					url: `../common/baseScreen?obj=${JSON.stringify(obj)}`,
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			changeEquipmentName() {
				console.log(this.$store.state.GuyueModule.MesBasicInfo.warehouse);
				this.FormData.EquipmentName = this.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentName
				// this.FormData.EquipmentCode = this.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentCode
				// this.FormData.EquipmentName = this.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentCode
				this.FormData.EquipmentID = this.$store.state.GuyueModule.MesBasicInfo.warehouse.EquipmentID
			},
			scan() {
				let that = this;
				this.$scanPopup.openScan({
					success: (res) => {
						that.jobid = res.result.replace(/^.*?\|/, '')
						that.Request.request('scanJobOrder', {
							JobOrderID: that.jobid
						}, (ret) => {
							if (ret.status == 200) {
								if (ret.data.ds.length > 0) {
									if (ret.data.ds[0].status == 500) {
										that.popuptitle = '报错'
										that.popupcontent = ret.data.ds[0].msg
										that.popup_logout = true
									} else {
										var item = ret.data.ds[0]
										item.FDailyOutputID = 0
										var url
										let routes = getCurrentPages();
										let obj = {
											Name: '报工',
											APPFunID: '报工',
											length: routes.length + 1
										}
										url = `./reportingDetail?item=${JSON.stringify(item)}`
										that.GonavigateTo(obj, url)

									}

								}



							}
						})
					}
				})

			},
			planIDClick(item) {
				let that = this;
				var url
				let routes = getCurrentPages();
				let obj = {
					Name: '',
					APPFunID: '',
					length: routes.length + 1
				}
				obj.Name = '报工'
				obj.APPFunID = '报工'
				url = `./reportingDetail?item=${JSON.stringify(item)}`
				that.GonavigateTo(obj, url)

			},
			GonavigateTo(obj, url) {
				let that = this;
				if (that.disabled == false) {
					// 立即禁用点击
					that.disabled = true
					let newData = JSON.parse(JSON.stringify(this.$store.state.GuyueModule.ModuleData_select));
					newData.push(obj);
					this.$store.commit('GuyueModule/ChangeAndSetStateData', {
						Name1: 'ModuleData_select',
						data: newData
					})
					uni.navigateTo({
						url: url,
						animationType: 'slide-in-right', // 动画类型
						animationDuration: 300 // 动画时长
					});
					setTimeout(() => {
						that.disabled = false
					}, 4000)
				}
			},
			addTime(name) {
				this.TimeName = name
				if (this.TimeName == '开始') {
					this.value1 = Number(getTimeStamp(this.FormData.FBDate))
				} else {
					this.value1 = Number(getTimeStamp(this.FormData.FEDate))
				}
				this.show = true
			},
			search() {
				this.$refs.popup.open('bottom')
			},
			submit() {
				let that = this;
				this.$refs.popup.close('bottom')
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();

			},
			pickerConfirm(e) {
				let that = this;
				var time = getFormatDateTime(e.value)
				if (this.TimeName == '开始') {
					this.FormData.FBDate = time
				} else {
					this.FormData.FEDate = time
				}
				this.show = false
			},
			changePopup() {

			},
			radioClick(item, idx) {
				let that = this;
				// console.log(item);
				this.radios.map((item, index) => {
					item.checked = index === idx ? true : false
				})
				that.FormData.FState = item.id;
				this.contents = []; // 假设这是异步获取数据的操作
				this.$refs.paging.reload();
			},
			queryList(pageNo) {
				let that = this;
				this.FormData.PageIndex = pageNo
				try {
					that.Request.request('getWOJobOrderList', this.FormData, (ret) => {
						if (ret.status == 200) {
							ret.data.ds.map(item => item.BillDate = item.BillDate ? item
								.BillDate.split('T')[0] : '')
							that.$refs.paging.complete(ret.data.ds);
						}
					})
				} catch (e) {
					console.log(e)
					this.$utils.hideLoading();
					this.$utils.msg('请求失败请重试')
				}

			},

			changeLevel(data, row) {
				let routes = getCurrentPages(); //当前页面栈
				let backIndex = routes.length - row.length; // 计算返回页面栈数

				uni.navigateBack({
					delta: backIndex
				})
			},


		}
	}
</script>

<style lang="scss">
	@import "../css/index.css";
</style>